<template>
  <view class="login">
    <view class="login-head"></view>
    <!-- 标题 -->
    <view class="login-title">
      <h5>环北数字化建管平台</h5>
    </view>
    <view class="login-content">
      <u-form :model="form" ref="uForm" class="login-content-from">
        <!-- 用户名 -->
        <u-form-item prop="username" class="login-content-from-name" ref="item1">
          <u-input v-model="form.username" prefix-icon="/static/login/account.png" placeholder="请输入用户名"
            prefix-icon-style="padding:0 8px"></u-input>
        </u-form-item>
        <!-- 密码 -->
        <u-form-item prop="password" class="login-content-from-password" ref="item1">
          <u-input v-model="form.password" prefix-icon="/static/login/password.png" placeholder="请输入密码"
            :type="showpassword ? 'text' : 'password'" prefix-icon-style="padding:0 8px">
            <template #suffix>
              <img :src="showpassword ? '/static/login/yan.png' : '/static/login/bi_yan.png'  " alt="密码可见性切换" @click.stop="toggleShowPassword"  style="width: 20px; height: 20px; margin-right: 10px; " />
            </template>
          </u-input>
        </u-form-item>
        <!-- 复选框 -->
        <u-checkbox-group class="login-content-from-checkbox">
          <u-checkbox v-model="remenberpassword" shape="circle" label="记住密码"></u-checkbox>
          <u-checkbox v-model="autologin" shape="circle" label="自动登录"></u-checkbox>
        </u-checkbox-group>
        <!-- 登录按钮 -->
        <u-button type="primary" @click="handleClick" class="login-content-from-button">确定</u-button>
      </u-form>
    </view>
  </view>
</template>

<script>
  import {
    getJwks
  } from '@/utils/Jwks.js';
  import {
    apiLogin
  } from '@/api/auth/auth.js';
  export default {
    data() {
      return {
        autoLogin: false,
        rememberPassword : false,
        showpassword: false,
        form: {
          username: '',
          password: ''
        }
      };
    },
    onLoad() {
      const loginInfo = uni.getStorageSync('loginInfo') || {};
      this.form.username = loginInfo.username || '';
      this.form.password = loginInfo.password || '';
      this.rememberPassword = loginInfo.rememberPassword || false;
      this.autoLogin = loginInfo.autoLogin || false;
    },
    methods: {
      handleValidateError(errors) {
        const firstError = errors[0];
        uni.showToast({
          title: firstError.message,
          icon: 'none'
        });
      },
      toggleShowPassword() {
        this.showpassword = !this.showpassword;
      },
      handleClick() {
        if (!this.form.username) {
          uni.showToast({
            title: '请输入账号！',
            icon: 'none'
          });
          return false;
        }
        if (!this.form.password) {
          uni.showToast({
            title: '请输入密码！',
            icon: 'none'
          });
          return false;
        }
        getJwks(this.form.password).then((newPassword) => {
          apiLogin({
            username: this.form.username,
            password: newPassword
          }).then((res) => {
            uni.setStorageSync('token', res.data.token);
            uni.setStorageSync('projectId', res.data.defaultProject?.projectId);
            if (this.rememberPassword || this.autoLogin) {
              uni.setStorageSync('loginInfo', {
                username: this.form.username,
                password: this.form.password,
                rememberPassword: this.rememberPassword,
                autoLogin: this.autoLogin
              });
            } else {
              uni.removeStorageSync('loginInfo');
            }
            if (this.autoLogin) {
              uni.setStorageSync('autoLoginFlag', true);
            }
            uni.showToast({
              title: '登录成功！',
              icon: 'none'
            });
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/home/workbench/workbench'
              });
            }, 2000);
          });
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .login {
    display: flex;
    flex-direction: column;
    background-color: rgb(232, 249, 255);
    background-size: cover;
    width: 100%;
    height: 100vh;

    .login-head {
      height: 18%;
      background-image: url('/static/login/head_bg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .login-title {
      margin: 10px 0;
      text-align: center;
      padding: 30px;
      text-align: center;

      h5 {
        font-size: 24px;
        color: #29c2cd;
      }
    }

    .login-content {
      padding: 10px 20px;

      .login-content-from {
        padding: 10px;
        display: flex;
        flex-direction: column;
        text-align: center;

        .login-content-from-name {
          width: 100%;
          margin-bottom: 30px;
          border-radius: 25px;
          box-shadow: 0, 3px 20px 2px rgba(0, 0, 0, 0.3);
          background-color: white;
        }

        .login-content-from-password {
          width: 100%;
          margin-bottom: 30px;
          border-radius: 25px;
          box-shadow: 0, 3px 20px 2px rgba(0, 0, 0, 0.3);
          background-color: white;
        }

        .login-content-from-checkbox {
          justify-content: space-between;
          margin-bottom: 30px;
        }

        .login-content-from-button {
          border-radius: 20px;
        }
      }
    }
  }
</style>
